<template>
<div v-loading="loading">
  <el-popover
      placement="bottom"
      width="250"
      class="serch">
    <div style=" margin: 0">
      <el-input style="width: 180px" v-model="sth" ></el-input>
      <el-button icon="el-icon-search" @click="search()"></el-button>
    </div>
    <el-button slot="reference" icon="el-icon-search" circle></el-button>
  </el-popover>
    <div class="card-wrap">
      <div class="survey-card-context" v-for="item in tableData">
        <el-card :body-style="{ padding: '20px'}" class="exam" shadow="always" >
          <div  >
            <div class="time"><p class="ziti">{{item.paperName}}</p><br></div>
            <div class="bottom clearfix">
              <time class="time"><strong>填写时间:</strong>{{item.createTime}}</time><br><br>

              <el-button type="text"  @click="detail(item.id)" icon="el-icon-s-data">详情</el-button><br />
            </div>
          </div>
        </el-card>
      </div>

    </div>

      <el-pagination
          background
          layout="prev, pager, next"
          class="weizhi"
          :page-size="pageSize"
          :total="total"
          @current-change="page">
      </el-pagination>

  </div>
</template>

<script>

export default {

  data() {
    return {
      loading:true,
      sth:'',
      flag:true,
      pageSize:8,
      total:3,
      tableData: null,
    }
  },
  methods: {
    search(){
      this.flag=false;
      const _this = this;
      let id1 = sessionStorage.getItem('id');
      axios.get(_this.APIurl.apiUrl.domainName + 'examPaperAnswer/findByPaperNameLike/'
          +_this.sth+'/'+ id1 + '/1/8').then(function(resp) {
        console.log(resp)
        _this.tableData = resp.data.data.content
        _this.total = resp.data.data.totalElements
      })
    },



    detail(id){
      this.$router.push({
					path: "/answerPreview",
					query: {
						id: id,
					}
				})
    },





    page(currentPage) {
      const _this = this
      let id2 = sessionStorage.getItem('id');
      if(this.flag){
        axios.get(_this.APIurl.apiUrl.domainName + 'examPaperAnswer/findExamPaperAnswers/' +
            id2 + '/' + currentPage + '/8').then(function(resp) {
          console.log(resp)
          _this.tableData = resp.data.data.content
          _this.total = resp.data.data.totalElements
        })
      }else {
        axios.get(_this.APIurl.apiUrl.domainName + 'examPaperAnswer/findByPaperNameLike/'
            +_this.sth+'/'+ id2 + '/' + currentPage +'/8').then(function(resp) {
          console.log(resp)
          _this.tableData = resp.data.data.content
          _this.total = resp.data.data.totalElements
        })
      }
    }
  },
  created() {
    const _this = this;
    let id1=sessionStorage.getItem('id');
    axios.get(_this.APIurl.apiUrl.domainName+'examPaperAnswer/findExamPaperAnswers/'+id1+'/1/8').then(function(resp){
      _this.loading=false
      _this.tableData = resp.data.data.content
      _this.total = resp.data.data.totalElements
    })
  }


}
</script>


<style scoped>

.weizhi{
  margin-left: 180px;
}

.serch{
  margin-top: 50px;
  margin-right: 20px;
  float: right;
}

.card-wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: start;
  margin-left: 13%;
}
.survey-card-context {
  margin: 20px 40px 40px 20px;
}

.ziti{
  text-align: center;
  font-size:22px ;
  font-family: 楷体;
  width:180px;
  color: black;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.time {
  font-size: 15px;
  color: #999;
}
.exam {
  width: 210px;
  height: 260px;
  margin-right: 30px;
  transition: all .5s;
  background: -webkit-linear-gradient(top,hsla(0,0%,59%,.15),hsla(0,0%,59%,0),white) no-repeat;
}
.exam:hover{
  margin-top: -5px;
}


</style>
